<template>
  <div class='demeritPoints' id='demeritPoints'></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data(){

  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    getFormatName(name){
      const length = name.length;
      let str = name
      if (length == 6) {
        const middleIndex = 4;
        str = name.slice(0, middleIndex) + '\n' + name.slice(middleIndex);
      }
      if (length > 6){
        const middleIndex = Math.floor(length / 2);
        return str.slice(0, middleIndex) + '\n' + str.slice(middleIndex);
      }
      return str
    },

    initEcharts(){
      let data = [
        {
          name: '发展战略规划',
          value1: 12,
          value2: 44,
          value3: 54
        },
        {
          name: '重大政策及决策部署落实',
          value1: 0,
          value2: 12,
          value3: 84
        },
        {
          name: '执行财经法规',
          value1: 7,
          value2: 76,
          value3: 12
        },
        {
          name: '贯彻上级决策',
          value1: 56,
          value2: 1,
          value3: 45
        },
        {
          name: '项目投资管理',
          value1: 32,
          value2: 43,
          value3: 12
        },
        {
          name: '招标采购管理',
          value1: 71,
          value2: 2,
          value3: 21
        },
        {
          name: '人力资源管理',
          value1: 32,
          value2: 31,
          value3: 35
        },
        {
          name: '物资管理',
          value1: 65,
          value2: 3,
          value3: 32
        },
        {
          name: '内控风险管理',
          value1: 25,
          value2: 15,
          value3: 67
        },
        {
          name: '电力营销',
          value1: 43,
          value2: 21,
          value3: 14
        },
        {
          name: '履职尽责方面',
          value1: 55,
          value2: 23,
          value3: 21
        },
        {
          name: '廉洁从业方面',
          value1: 11,
          value2: 22,
          value3: 71
        },
      ]
      let sourceData = [
        ['product', '扣分值', '实际得分', '分值'],
      ]
      data.forEach(res => {
        sourceData.push([this.getFormatName(res.name),res.value1,res.value2,res.value3])
      })

      let chartDom = document.getElementById('demeritPoints');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          selectedMode:false,
        },
        grid: {
          left: 50,
          right: 50
        },
        tooltip: {},
        dataset: {
          source: sourceData
        },
        xAxis: {
          type: 'category',
          axisLabel: {textStyle: {color: '#ffffff'},interval: 0},
        },
        yAxis: {
          axisLabel: {textStyle: {color: '#ffffff'}},
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#aaaaaa'
              }
            }
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#f59a23'
              }
            }
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#5bcfcf'
              }
            }
          },
        ]
      };

      option && myChart.setOption(option);

    }
  }
}
</script>

<style scoped>
.demeritPoints{
  height: 100%;
  width: 100%;
}
</style>
